<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<body>
    <header id="header" class="header" th:fragment="header">
        <div class="header-inner">
            <div class="site-brand-wrapper">
                <div class="site-meta">
                    <div class="custom-logo-site-title">
                        <a href="" class="brand" rel="start">
                            <span class="logo-line-before"><i></i></span>
                            <span class="site-title">Van's&nbsp;Blog</span>
                            <span class="logo-line-after"><i></i></span>
                        </a>
                    </div>
                    <p class="site-subtitle">Hello World!</p>
                </div>
                <div class="site-nav-toggle">
                    <button>
                        <span class="btn-bar"></span>
                        <span class="btn-bar"></span>
                        <span class="btn-bar"></span>
                    </button>
                </div>
            </div>
            <nav class="site-nav">
                <ul id="menu" class="menu">
                    <li id="index" class="menu-item menu-item-home">
                        <a href="/" rel="section">
                            <i class="menu-item-icon fa fa-fw fa-home"></i> <br> Home
                        </a>
                    </li>
                    <li id="archives" class="menu-item menu-item-archives">
                        <a href="/archives" rel="section">
                            <i class="menu-item-icon fa fa-fw fa-archive"></i> <br> Archives
                        </a>
                    </li>
                    <li id="categories" class="menu-item menu-item-categories">
                        <a href="/categories" rel="section">
                            <i class="menu-item-icon fa fa-fw fa-th"></i> <br> Categories
                        </a>
                    </li>
                    <li id="tags" class="menu-item menu-item-tags">
                        <a href="/tags" rel="section">
                            <i class="menu-item-icon fa fa-fw fa-tags"></i> <br> Tags
                        </a>
                    </li>
                    <li id="about" class="menu-item menu-item-about">
                        <a href="/about" rel="section">
                            <i class="menu-item-icon fa fa-fw fa-user"></i> <br> About
                        </a>
                    </li>
                </ul>
                <div class="site-search">
                    <div class="algolia-popup popup search-popup">
                        <div class="algolia-search">
                            <div class="algolia-search-input-icon">
                                <i class="fa fa-search"></i>
                            </div>
                            <div class="algolia-search-input" id="algolia-search-input">

                            </div>
                        </div>
                        <div class="algolia-results">
                            <div id="algolia-stats"></div>
                            <div id="algolia-hits"></div>
                            <div id="algolia-pagination" class="algolia-pagination"></div>
                        </div>
                        <span class="popup-btn-close"><i class="fa fa-times-circle"></i></span>
                    </div>
                </div>
            </nav>
        </div>
    </header>
</body>

</html>